<template>
  <div class="content">
    <div class="window">
      <el-tabs type="border-card" v-model="octopus.passport.tabCurrentName"
               @tab-click="set" closable @tab-remove="removeTab">
        <el-tab-pane name="M_0">
          <span slot="label"><div class="icon iconyemian-copy-copy"></div></span>
          <template v-if="'M_0' == octopus.passport.tabCurrentName || tabData.includes('M_0')">
            <iframe v-bind:src="get(octopus.passport.tab[0].url)"></iframe>
          </template>
        </el-tab-pane>
        <el-tab-pane v-for="tab in octopus.passport.tab" :name="'M_'+tab.id" :key="tab.id" v-if="tab.id > -1"><span
          slot="label">{{tab.name}}</span>
          <template v-if="'M_'+tab.id == octopus.passport.tabCurrentName || tabData.includes('M_'+tab.id)">
            <iframe v-bind:src="get(tab.url)"></iframe>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'com_content', /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
    data() {
      return {
        octopus: this.$parent.octopus,
        tabData: [],
        // height: 50,// 默认高度
        // width: 100, // 默认宽度
      }
    },
    created: function () {
      this.init();
      // 添加tab打开的数据
      this.tabData.push(this.octopus.passport.tabCurrentName);
      this.octopus.tips.debug("Content.vue执行了created事件，路由模式：" + this.$router.mode + "，路由模式2：" + this.octopus.router.getter().mode);
    },
    updated: function () {
      this.octopus.tips.debug("Content.vue执行了updated事件。");
    },
    mounted: function () {
      this.$nextTick(function () {
        // 主页是不能删除的。
        $("#tab-M_0 .el-icon-close").hide();
      });
      this.octopus.tips.debug("Content.vue执行了mounted事件。");
    },
    // 活动事件，写在这里的好处是不管是第一次创建还是后退回来，都会触发这个事件
    // 比较典型的就是列表组件，返回的时候往往是需要刷新的。
    activated: function () {
      this.load();
      this.octopus.tips.debug("Content.vue执行了activated事件。");
    },
    computed: {},
    methods: {
      // 初始化
      init: function () {
        this.initData();
      },
      // 初始化相关内容
      initData: function () {
        let o = this;
        // $(window).resize(function () {
        //   o.resize();
        // });
        // // 5秒后补刀一下。
        // setTimeout(function () {
        //   o.resize();
        // }, 5000);
      },
      // iframe onload complete event。
      load: function () {
        // this.resize();
      },
      // // 内容控件联动事件，由外部触发。
      // resize: function () {
      //   let o = this;
      //   $(document).ready(function () {
      //     o.height = $(window).height() - o.octopus.template.getTheme().offset.content;
      //     let windowWidth = $(window).width();
      //     windowWidth = windowWidth > 1000 ? windowWidth : 1000;// 因为框架设置了最小为1000，所以过小就不缩了。
      //     o.width = windowWidth - 200;// 菜单默认给予200宽度
      //   });
      // },
      // 获取
      get: function (url) {
        if (!this.octopus.tools.IsNullOrEmpty(url)) {
          // 判断路由模式，如果是hash，则需要加上#/
          if (this.octopus.router.getter().mode == "hash" && url.indexOf("http") == -1) {
            url = "#" + url;
          }
          // 不存于护照，每次动态追加Token，时刻保持新鲜。
          url = url.indexOf("?") > 0 ? url + "&" : url + "?";
          url = url + "access_token=" + this.octopus.passport.token;
          return url;
        } else {
          return "../NoData";
        }
      },
      set: function (tab, event) {
        this.octopus.passport.tabCurrentName = tab.name;

        // 加了这个代码。。就正常了。。我日。。
        this.octopus.tips.debug("tab status: name:" + tab.name + " - " + this.tabData.includes(tab.name));

        // 打开过的进行追加
        if (!this.tabData.includes(tab.name)) {
          this.tabData.push(tab.name);
        }


        let clickTab = null;
        // 回调tab的click事件
        if (this.click) {
          if (tab.name != "M_0") {
            clickTab = $.grep(this.octopus.passport.tab, function (curr, i) {
              return curr.id.toString() == tab.name.split("_")[1];
            })[0];
          } else {
            clickTab = this.octopus.passport.tab[0];
          }
          this.click(clickTab);
        }
      },
      removeTab: function (name) {
        // 如果关闭页是当前焦点页，则自动回到首页。
        if (this.octopus.passport.tabCurrentName == name) {
          // alert(JSON.stringify(this.octopus.passport.tab));
          this.octopus.passport.tabCurrentName = "M_0";
        }
        // 移除
        this.octopus.passport.tab = $.grep(this.octopus.passport.tab, function (curr, i) {
          return curr.id.toString() != name.split("_")[1];
        });
      }

    }
    ,
    watch: {
      // 监听source对象
      // 'octopus.passport.tab': {
      //   handler(newval, oldval) {
      //     console.log("tab status: watch:" + JSON.stringify(oldval) + "==>" + JSON.stringify(newval));
      //   },
      //   deep: true // 启用深度监听模式，可监控到属性。
      // },
      'octopus.passport.tabCurrentName': {
        handler(newval, oldval) {
          // 获得新焦点tab以后，检测如果不存在于this.tabData，则进行追加，否则新加载的页面都要再加载一次才能显示。
          if (!this.tabData.includes(newval)) {
            this.tabData.push(newval);
          }
          this.octopus.tips.debug("tab status: watch:" + JSON.stringify(oldval) + "==>" + JSON.stringify(newval));
        },
        deep: true // 启用深度监听模式，可监控到属性。
      },
    }
    ,
    props: ["click"]
  }
</script>

